<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1,requiresActiveX=true"/>
  <title>validate.js</title>
  <style type="text/css">
  body{padding: 30px;font-family:lucida grande;}
  label{display:block;width:180px}
  .error{border:2px solid #f36!important;}
  .editable{min-height:100px;_zoom:1;_height:100px;border:1px solid gray;}
  </style>
</head>

<body class="typo">

<h3># Example Product</h3>
<ul>
<li>Simple: <a href="http://inews.io/account/register">http://inews.io/account/register</a></li>
<li>Advance: <a href="http://shanghai.baixing.com/fabu/ershouqiche">http://shanghai.baixing.com/fabu/ershouqiche</a></li>
</ul>
<h3># form validator</h3>
<form action="/" id="form">
  <p>
      <select name="select" id="" required data-error="select">
          <option value="1">item 1</option>
          <option value="2">item 2</option>
          <option value="3">item 3</option>
      </select>
  </p>
  <p><label>Text: <input name="text" required maxlength="1" list="list"></label>
      <datalist id="list">
          <select name="text">
              <option>A
              <option>B
              <option>C
              <option>D
          </select>
      </datalist>
  <p><label>Number: <input type="number" required></label>

  <p><label>Number
      <small>(1 &lt; value &lt; 10)</small>:
      <input type="number" required min="1" max="10"></label>

  <p><label>Negative number
      <small>(-10 &lt; value &lt; 10)</small>:
      <input type="number" required min="-10" max="10"></label>

  <p><label>Number with step
      <small>(1 &lt; value &lt; 10, step === 2)</small>:
      <input type="number" required min="1" max="10" step="2"></label>

  <p><label>Range
      <small>(1 to 5)</small>:
      <input type="range" required min="1" max="5"></label>
  <p><label>Email: <input type="email" required></label>

  <p><label>Url: <input type="url" required></label>

  <p><label>Tel: <input type="tel" required></label>

  <p><label>Mobile: <input type="mobile" required></label>

  <p><label>Password: <input type="password" required></label>

  <p><label>Async Validate:
  <input type="text" data-url="https://api.github.com/legacy/user/search/china" data-method="getJSON" required></label></p>

  <p><label>A or B:</label>
      <input type="text" data-aorb="a" required>
      <br />
      <input type="text" data-aorb="b" required>
  </p>

  <p>
      <label><input type="radio" required name="abc" value="A">[A]</label>
      <label><input type="radio" required name="abc" value="B">[B]</label>
      <label><input type="radio" required name="abc" value="C">[C]</label>

  <p><label>Custom Event: <input id="event" type="text" data-event="hello" required></label>

  <p><textarea maxlength="20"  placeholder="some text" required data-error="textarea"></textarea></p>

  <p>Input email here:
  <div>
    <div class="editable" contenteditable required type="email">hello__world@world.com</div>
  </div>

  <p>Input a number here:
  <div>
    <div class="editable" contenteditable required pattern="^\d+$">123</div>
  </div>

  <input type="submit" value="send"/>
  <input id="validate-form" type="button" value="validate without submit" />
</form>

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="validator.js"></script>
<script type="text/javascript">
  $('#form').validator({
    errorCallback: function(unvalidFields){
        $(unvalidFields).each(function(i,item){
          //console.log(item.$el[0])
        })
    }
    , isErrorOnParent: true
  });

  $('#event').on('before:hello', function(event, element){
    //console.log('`before.hello` event trigger on $("#' + element.id + '")');
  })

  $('#event').on('after:hello', function(event, element){
    //console.log('`after.hello` event trigger on $("#' + element.id + '")');
  })

  $('#validate-form').on('click', function(){
    $(this).closest('form').validate()
  })
</script>

</body>
</html>
